<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-07-23 17:16:31
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-07-26 10:09:10
 * @Description:
 *
-->

<template>
  <el-form
    ref="form"
    class="create-openstack"
    :rules="rules"
    :model="form"
    label-width="auto"
    size="medium"
  >
    <el-form-item
      v-if="scene != 'orchestrate'"
      label="云服务商"
      prop="cloudProvider"
    >
      <el-select
        v-model="form.cloudProvider"
        placeholder="请选择云服务商"
        style="width: 100%"
      >
        <el-option
          v-for="item in cloudProviderOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item
      v-if="scene != 'orchestrate'"
      label="云账户"
      prop="cloudAccountName"
    >
      <el-select
        v-model="form.cloudAccountName"
        placeholder="请选择云账户"
        style="width: 100%"
        no-data-text="请先选择合适的云服务商"
        :loading="loadingCloudAccountName"
      >
        <el-option
          v-for="item in cloudAccountNameOptions"
          :key="item.cloudAccountName"
          :label="item.cloudAccountName"
          :value="item.cloudAccountName"
        />
      </el-select>
    </el-form-item>
    <el-form-item
      v-if="scene != 'orchestrate'"
      label="外部网络"
      prop="extNetId"
    >
      <el-select
        v-model="form.extNetId"
        placeholder="请选择外部网络"
        style="width: 100%"
        no-data-text="请先选择合适的云账户"
        :loading="loadingExternalNetwork"
      >
        <el-option
          v-for="item in extNetIdOptions"
          :key="item.id"
          :label="item.name"
          :value="item.cpId"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="描述" prop="desc">
      <el-input
        v-model="form.desc"
        placeholder="请输入描述"
        type="textarea"
        :rows="3"
      />
    </el-form-item>
  </el-form>
</template>

<script>
import resSelectorMixin from '@/views/mixin/resSelector.js'
import { getFloatIPPools } from '@/api/cn-resource'

export default {
  name: 'CreateOpenstack',
  components: {},
  mixins: [resSelectorMixin],
  props: {
    cloudSelect: {
      type: String,
      default: 'Openstack'
    },
    scene: {
      type: String,
      default: 'create'
    },
    info: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      cloudProviderType: 'private',
      skipGetCloudAccount: false,
      loadingExternalNetwork: false,
      extNetIdOptions: [],
      form: {
        cloudProvider: '',
        cloudAccountName: '',
        extNetId: '',
        desc: ''
      },
      rules: {
        cloudProvider: [
          { required: true, message: '请选择云平台', trigger: 'change' }
        ],
        cloudAccountName: [
          { required: true, message: '请选择云账户', trigger: 'change' }
        ],
        extNetId: [
          { required: true, message: '请选择外部网络', trigger: 'change' }
        ]
      }
    }
  },
  computed: {},
  watch: {
    /**
     * @description: 监听
     * @return {*}
     */
    info: {
      handler(newVal) {
        if (newVal) {
          this.form = Object.assign(this.form, this.info)
        }
      },
      immediate: true,
      deep: true
    },
    'form.cloudAccountName': {
      handler(newVal) {
        if (newVal) {
          this.getFIPPools()
        }
      },
      immediate: true
    },
    cloudSelect: {
      handler(newVal) {
        if (newVal) {
          this.form.cloudProvider = this.cloudSelect
        }
      },
      immediate: true
    }
  },
  created() {
    this.skipGetCloudAccount = this.scene === 'orchestrate'
  },
  methods: {
    getFIPPools() {
      this.loadingExternalNetwork = true
      getFloatIPPools({
        cloudAccountName: this.form.cloudAccountName
      })
        .then((res) => {
          this.extNetIdOptions = Array.isArray(res.data) ? res.data : []
        })
        .finally(() => {
          this.loadingExternalNetwork = false
        })
    },
    /**
     * @description: 校验
     * @return {*}
     */
    validateForm(callback) {
      this.$refs.form.validate((valid, obj) => {
        if (valid) {
          callback(this.form)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.create-openstack {
}
</style>
